<template>
	<transition name="el-zoom-in-center">
		<div class="JNPF-preview-main">
			<div class="JNPF-common-page-header">
				<el-page-header @back="goBack" :content="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'"/>
				<div class="options">
					<el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail">确 定</el-button>
					<el-button @click="goBack">取 消</el-button>
				</div>
			</div>
			<el-row :gutter="15"  class="main" :style="{margin: '0 auto',width:'100%'}">
			<el-form ref="elForm" :model="dataForm" size="medium" label-width="130px" label-position="right" :disabled="!!isDetail" :rules="rules">
				<el-col :span="24">
					<el-form-item label="计划名称" prop="jhmc" required >
						<el-input v-model="dataForm.jhmc" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="组织单位" prop="zzdw" required >
						<el-select v-model="dataForm.zzdw" placeholder="请选择" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in zzdwOptions" :key="index" :label="item.F_FullName" :value="item.F_Id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="16">
					<el-form-item label="风险点" prop="fxd" required >
						<el-select v-model="fxd" placeholder="请选择" disabled clearable :style='{"width":"100%"}' multiple >
							<el-option v-for="(item, index) in fxdOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6" style="margin-left:20px;">
					<el-button type="primary" @click="FxdSelect">
						选择
					</el-button>
				</el-col>
				<el-col :span="24">
					<el-form-item label="风险点类型" prop="fxdlx" required >
						<el-select v-model="fxdlx" placeholder="请选择" disabled clearable :style='{"width":"100%"}' multiple filterable>
							<el-option v-for="(item, index) in fxdlxOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="排查人" prop="pcr" required >
						<el-select v-model="pcr" placeholder="请选择" disabled clearable :style='{"width":"100%"}' multiple filterable>
							<el-option v-for="(item, index) in pcrOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="被查单位" prop="bcdw" required >
						<el-select v-model="dataForm.bcdw" placeholder="请选择" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in bcdwOptions" :key="index" :label="item.F_FullName" :value="item.F_Id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="排查开始日期" prop="pcksrq" required >
						<el-date-picker v-model="dataForm.pcksrq" placeholder="请选择" clearable :style='{"width":"100%"}' type="date" format="yyyy-MM-dd" value-format="timestamp" >
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="排查结束日期" prop="pcjsrq" required >
						<el-date-picker v-model="dataForm.pcjsrq" placeholder="请选择" clearable :style='{"width":"100%"}' type="date" format="yyyy-MM-dd" value-format="timestamp" >
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="24" v-if="false" >
					<el-form-item label="创建时间" prop="cjsj" >
						<el-input v-model="dataForm.cjsj" placeholder="系统自动生成" readonly >
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24" style="display:none;">
					<el-form-item label="状态" prop="zt" required >
						<el-select v-model="dataForm.zt" placeholder="请选择" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in ztOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="排查类型" prop="pclx" required >
						<el-select v-model="dataForm.pclx" placeholder="请选择" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in pclxOptions" :key="index" :label="item.LX" :value="item.ID" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-form>
			</el-row>
			<FxdsBox v-if="fxdsBoxVisible" ref="fxdsBox" @refreshDataList="initListFxd" />
		</div>
	</transition>

</template>
<script>
import request from '@/utils/request'
import {getDictionaryDataSelector}from '@/api/systemData/dictionary'
import {previewDataInterface}from '@/api/systemData/dataInterface'
import FxdsBox from './FxdBox'
export default {
	components: { FxdsBox },
    data() {
		var pcksrqTime = (rule, value, callback) => {
			if (!this.dataForm.pcjsrq) {
				callback()
			} else {
				if (this.dataForm.pcjsrq < value) {
				callback(new Error('排查开始日期应该小于排查结束日期'));
				} else {
				// this.$refs.dataForm.validateField('pcjsrq');
				callback()
				}
			}
		}
		var pcjsrqTime = (rule, value, callback) => {
			if (!this.dataForm.pcksrq) {
				callback()
			} else {
				if (this.dataForm.pcksrq > value) {
				callback(new Error('排查结束日期应该大于排查开始日期'));
				} else {
				callback()
				}
			}
		}
      return {
		fxdsBoxVisible: false,  //-
        visible: false,
        isDetail: false,
        dataForm: {
					jhmc:undefined,
					zzdw:undefined,
					fxd:[],
					fxdlx:[],
					pcr:[],
					bcdw:undefined,
					pcksrq:undefined,
					pcjsrq:undefined,
					zt:'1',
					pclx:undefined,
					sz:[],

        },
        rules: {
						jhmc:[
						{
							required:true,
							message:'请输入计划名称',
							trigger:'blur'
						},
						],
						zzdw:[
						{
							required:true,
							message:'请输入组织单位',
							trigger:'blur'
						},
						],
						fxd:[
						{
							required:true,
							message:'请输入风险点',
							trigger:'blur'
						},
						],
						pcr:[
						{
							required:true,
							message:'请输入排查人',
							trigger:'blur'
						},
						],
						bcdw:[
						{
							required:true,
							message:'请输入被查单位',
							trigger:'blur'
						},
						],
						pcksrq:[
						{
							required:true,
							message:'请输入排查开始日期',
							trigger:'blur'
						},
						{ validator: pcksrqTime, trigger: 'change' }
						],
						pcjsrq:[
						{
							required:true,
							message:'请输入排查结束日期',
							trigger:'blur'
						},
						{ validator: pcjsrqTime, trigger: 'change' }
						],
						zt:[
						{
							required:true,
							message:'请输入状态',
							trigger:'blur'
						},
						],
						pclx:[
						{
							required:true,
							message:'请输入排查类型',
							trigger:'blur'
						},
						],

        },
				zzdwOptions:[],
				fxdOptions:[],
				fxdlxOptions:[],
				pcrOptions:[],
				bcdwOptions:[],
				ztOptions:[{"fullName":"未派发","id":"1"},{"fullName":"进行中","id":"2"},{"fullName":"已结束","id":"3"}],
				pclxOptions:[],

				fxd:[],
				fxdlx:[],
				pcr:[],
				fxdPcrList:[]

      }
    },
    created() {
		this.getzzdwOptions();
		this.getbcdwOptions();
		this.getpclxOptions();
    },
    methods: {
		getzzdwOptions()
		{
			previewDataInterface('772d2cbcadd24df79243e3d92ef5f690').then(res => {
				this.zzdwOptions = res.data
			})
		},
		getbcdwOptions()
		{
			previewDataInterface('772d2cbcadd24df79243e3d92ef5f690').then(res => {
				this.bcdwOptions = res.data
			})
		},
		getpclxOptions()
		{
			previewDataInterface('7ffbe4af1ea946dabb20e1dc367220a9').then(res => {
				this.pclxOptions = res.data
			})
		},

           goBack() {
                    this.$emit('refresh')
                },
      init(id, isDetail) {

        this.dataForm.id = id || 0;
        this.visible = true;
        this.isDetail = isDetail || false;
        this.$nextTick(() => {
          this.$refs['elForm'].resetFields();
          if (this.dataForm.id) {
            request({
              url: '/api/System/pcjh/' + this.dataForm.id,
              method: 'get'
            }).then(res =>{
				// console.log(res.data);
              this.dataForm = res.data;
				this.fxd = this.dataForm.fxd ? this.dataForm.fxd.split(','):[];
				this.fxdlx = this.dataForm.fxdlx ? this.dataForm.fxdlx.split(','):[];
				this.pcr = this.dataForm.pcr ? this.dataForm.pcr.split(','):[];
				// this.fxdPcrList = res.data.sz;
				let szString = res.data.sz;
				let szArr1 = szString.replace(/\|/g,',');
				let szArr = JSON.parse(szArr1);
				this.fxdPcrList = szArr;
				let fxdArr = [];
				let fxdlxArr = [];
				let pcrArr = [];
				if(szArr.length > 0){
					for(let r=0;r<szArr.length;r++){
						fxdArr.push({"fullName":szArr[r].mc,"id":szArr[r].id});
						fxdlxArr.push({"fullName":szArr[r].lx,"id":szArr[r].lx});
						pcrArr.push({"fullName":szArr[r].pcrMc,"id":szArr[r].pcrId});
					}
				}
				this.fxdOptions = fxdArr;
				this.fxdlxOptions = fxdlxArr;
				this.pcrOptions = pcrArr;

            })
          }
        })
      },
      // 表单提交
      dataFormSubmit() {
				this.dataForm.fxd = this.fxd.join(',');
				this.dataForm.fxdlx = this.fxdlx.join(',');
				this.dataForm.pcr = this.pcr.join(',');
				let strfxdPcrList = JSON.stringify(this.fxdPcrList).replace(/},/g,'}|');
				this.$set(this.dataForm, 'sz', strfxdPcrList);

        this.$refs['elForm'].validate((valid) => {
          if (valid) {
            if (!this.dataForm.id) {
              request({
                url: '/api/System/pcjh',
                method: 'post',
                data: this.dataForm,
              }).then((res) =>{
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1000,
                  onClose: () =>{
                    this.visible = false;
                    this.$emit('refresh', true);
                  }
                })
              })
            } else {
              request({
                url: '/api/System/pcjh/' + this.dataForm.id,
                method: 'PUT',
                data: this.dataForm
              }).then((res) =>{
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1000,
                  onClose: () =>{
                    this.visible = false;
                    this.$emit('refresh', true);
                  }
                })
              })
            }
          }
        })
      },
		FxdSelect(){
			this.fxdsBoxVisible = true
			this.$nextTick(() => {
				this.$refs.fxdsBox.init(this.fxdPcrList)
			})
		},
		initListFxd(list) {
          this.rightsDate = [];
		  this.fxdPcrList = list;
		//   this.dataForm.sz = list;
		  let fxdArr = [];
		  let fxdlxArr = [];
		  let pcrArr = [];
		  let formFxd = [];
		  let formFxdlx = [];
		  let formPcr = [];
		  for(let i=0;i<list.length;i++){
			  fxdArr.push({"fullName":list[i].mc,"id":list[i].id});
			  fxdlxArr.push({"fullName":list[i].lx,"id":list[i].lx});
			  pcrArr.push({"fullName":list[i].pcrMc,"id":list[i].pcrId});
			  formFxd.push(list[i].id);
			  formFxdlx.push(list[i].lx);
			  formPcr.push(list[i].pcrId);
		  }
		  this.fxdOptions = fxdArr;
		  this.fxdlxOptions = fxdlxArr;
		  this.pcrOptions = pcrArr;
		  this.dataForm.fxd = formFxd;
		  this.dataForm.fxdlx = formFxdlx;
		  this.dataForm.pcr = formPcr;
		  this.fxd = formFxd;
		  this.fxdlx = formFxdlx;
		  this.pcr = formPcr;
        },
    }
  }
  </script>